<template>
  <f7-page class="notice-body1">
    <!-- 头部导航栏 -->
     <qm-currentcy-navbar title="工作" bgColor="#F5F6FA">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <!-- 内容1 -->
    <div v-for="(item, index) in list" :key="index">
      <div class="time">{{ item.time }}</div>
      <!-- 背景卡片 -->
      <f7-card
        class="qm-card"
        v-for="(itemtwo, index) in item.list2"
        :key="index"
      >
      <!-- 头部 -->
        <f7-card-header class="qm-card-header" v-if="itemtwo.header">{{
          itemtwo.header
        }}</f7-card-header>
        <!-- 内容 -->
        <f7-card-content class="qm-card-content">
          <div style="height: calc(266px * var(--ratio))" v-if="itemtwo.img">
            <img :src="itemtwo.img" alt="" />
          </div>
          <p v-else>{{ itemtwo.title }}</p>
        </f7-card-content>
        <!-- 底部查看更多 -->
        <f7-card-footer class="qm-card-footer" v-if="itemtwo.href">
          <f7-list class="qm-list">
            <f7-list-item title="查看更多" :link="itemtwo.href"></f7-list-item>
          </f7-list>
        </f7-card-footer>
      </f7-card>
    </div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          time: "09-24 08:00",
          list2: [
            {
              header: "班次提醒",
              title:
                "XX您好，您将在今天09:00:00上班，请提前做好准备，不要迟到哦~",
            },
            {
              header: "打卡签到",
              title: "您好，XX先生/女士，您于2018-09-24 09:52打卡成功！",
              href: "/ui/center/index5",
            },
          ],
        },
        {
          time: "2021-12-24 18:32",
          list2: [
            {
              img: "static/img/notice/index1/pic.png",
              href: "/ui/center/index5",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.notice-body1 {
  // 表头
  background-color: #F5F6FA;

  // 时间
  .time{
    text-align: center;
    color: #61677A;
    font-size: calc(24px * var(--ratio));
    margin-top: calc(60px * var(--ratio));
  }
  // 内容卡片
  .qm-card{
    --f7-card-margin-horizontal:calc(32px * var(--ratio));
    --f7-card-border-radius:calc(16px * var(--ratio));
    margin-top: calc(32px * var(--ratio));
    margin-bottom: 22px;
    .qm-card-header{
      --f7-card-header-font-weight:600;
      --f7-card-header-font-size:calc(32px * var(--ratio));

    }
    .qm-card-content{
      padding: 0px;
      color:#6E7580;
      font-size: calc(28px * var(--ratio));
      p{
        padding: 0px calc(32px * var(--ratio)) calc(32px * var(--ratio));
      }
      img{
        width: 100%;
        height: 100%;
        object-fit:cover;
        border-radius: calc(16px*var(--ratio)) calc(16px*var(--ratio)) 0 0;
      }
    }
    .qm-card-footer{
      padding: 0px;
      --f7-card-footer-min-height: 42px;
      .qm-list{
        width: 100%;
        --f7-list-item-title-font-size:calc(30px * var(--ratio));
        --f7-list-item-min-height: 41px;
        .item-inner:before{
          color: #CED6E0;
        }
      }
      .myfield{
        padding: 0px;
        margin: 0px calc(32px * var(--ratio)) 0px;
        // height: calc(42px * var(--ratio));
        .van-icon:before{
          line-height: 20px;
        }
      }
    }
    .qm-card-footer:before{
      margin: 0px calc(32px * var(--ratio));
      width: 90%;
    }
  }
}

</style>
